<!DOCTYPE html>
<html lang=zh-cn>
<head>
  <meta charset=utf-8>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/normalize.css@8/normalize.min.css">
  <script src="https://cdn.jsdelivr.net/npm/temme@0.7.0/browser/index.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/ace-builds@1.3.3/src-min/ace.js"></script>

  <script src="./matching_brace_outdent.js"></script>
  <script src="./mode-temme.js"></script>
  <title>Temme Playground</title>
  <style>
    h2 {
      margin: 8px 0;
      font-size: 16px;
      color: #374a68;
    }

    .d-flex {
      display: flex;
    }

    .flex-column {
      flex-direction: column;
    }

    .flex-align-center {
      align-items: center;
    }

    .flex-space-between {
      justify-content: space-between;
    }

    .flex-grow-1 {
      flex-grow: 1;
    }

    .hint {
      font-weight: normal;
      font-size: 16px;
      padding-left: 8px;
    }

    .transition-width {
      transition: width 300ms;
    }

    .nav-button {
      border: none;
      width: 64px;
      height: 24px;
      color: aliceblue;
      background: #5587d3;
    }

    #error-indicator {
      color: #dc3545;
    }

    #copy-result-button {
      width: 36px;
      height: 28px;
      color: #24292e;
      background: #eff3f6 linear-gradient(-180deg, #fafbfc 0%, #eff3f6 90%);
      cursor: pointer;
      border-radius: 2px;
      border: 1px rgba(27, 31, 35, 0.35) solid;
    }

    #copy-result-button:hover {
      background: #e6ebf1 linear-gradient(-180deg, #f0f3f6 0%, #e6ebf1 90%);
      border-color: rgba(27, 31, 35, 0.35);
    }

    #copy-result-button:active {
      outline: none;
      background: #e9ecef none;
      border-color: rgba(27, 31, 35, 0.35);
      box-shadow: inset 0 0.15em 0.3em rgba(27, 31, 35, 0.15);
    }

    #toggle-width-button {
      width: 50px;
      font-weight: bold;
    }

    .flat-button {
      height: 24px;
      border: none;
      background: #374a68;
      color: white;
      outline: none;
      cursor: pointer;
    }

    .editor {
      flex: 1;
      position: relative;
      border: 1px solid #eeeeee;
      font-size: 16px;
      font-family: Monaco, Menlo, "Ubuntu Mono", Consolas, source-code-pro, 'Microsoft YaHei', monospace;
    }

    .syntax-error {
      position: absolute;
      border-bottom: 1px solid red;
    }
  </style>
</head>
<body>

<div id="app" class="d-flex flex-column" style="height: 100vh; min-width: 900px">
  <header style="background-color: #1d2a3f; color: white; display: flex">
    <p style="margin: 8px">
      <span style="font-size: 125%;">Temme</span>
      <span>is a concise selector to extract JSON from HTML.</span>
      <span style="padding-left: 8px;">
        <a style="color: inherit" href="https://github.com/shinima/temme" target=_blank>GitHub</a>
      </span>
      <span style="padding-left: 8px;">
        <a
          style="color: inherit"
          href="https://marketplace.visualstudio.com/items?itemName=shinima.vscode-temme"
          target=_blank
        >
          VSCode Extension
        </a>
      </span>
      <span style="padding-left: 8px;">
        <a id=browse-example-link style="color: inherit" href="#">Examples</a>
      </span>
    </p>
    <div id=example-select-part style="display: none; margin: 8px 8px 0;">
      <select id=example-select title="Select an example" style="width: 350px"></select>
      <button id=prev-example-button class="nav-button">Prev</button>
      <button id=next-example-button class="nav-button">Next</button>
      <button id=exit-example-mode class=nav-button style="background: #b93309">Exit</button>
    </div>
  </header>
  <div class="flex-grow-1" style="display: flex">
    <div id="html-part" class="d-flex flex-column transition-width"
         style="width: 50%; margin-right: 8px">
      <h2 class="d-flex flex-align-center flex-space-between" style="margin-left: 8px;">
        <span>1: HTML
          <button id=format-html class=flat-button>Format</button>
        </span>
        <button id=toggle-width-button class=flat-button>&lt;</button>
      </h2>
      <div id=html-input class="editor"></div>
    </div>
    <div id=selector-output-part class="d-flex flex-column transition-width" style="width: 50%">
      <div class="d-flex flex-column flex-grow-1">
        <h2>2: Temme Selector<span id=error-indicator class="hint"></span></h2>
        <div id=selector-input class="editor"></div>
      </div>
      <div class="d-flex flex-column flex-grow-1">
        <div class="d-flex flex-align-center">
          <h2>3: Result (Readonly)</h2>
          <button id=copy-result-button style="margin-left: 8px;">
            <svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 14 16" width="14">
              <path fill-rule="evenodd"
                    d="M2 13h4v1H2v-1zm5-6H2v1h5V7zm2 3V8l-3 3 3 3v-2h5v-2H9zM4.5 9H2v1h2.5V9zM2 12h2.5v-1H2v1zm9 1h1v2c-.02.28-.11.52-.3.7-.19.18-.42.28-.7.3H1c-.55 0-1-.45-1-1V4c0-.55.45-1 1-1h3c0-1.11.89-2 2-2 1.11 0 2 .89 2 2h3c.55 0 1 .45 1 1v5h-1V6H1v9h10v-2zM2 5h8c0-.55-.45-1-1-1H8c-.55 0-1-.45-1-1s-.45-1-1-1-1 .45-1 1-.45 1-1 1H3c-.55 0-1 .45-1 1z"></path>
            </svg>
          </button>
          <span id=result-time-hint class="hint"></span>
        </div>
        <div id=output class="editor"></div>
      </div>
    </div>
  </div>
</div>

</body>
</html>
